<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>响应式布局</title>
            <!-- 引入bootstrap插件 -->
        <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

        <!-- 引入动画库 -->
        <link rel="stylesheet" href="./assets/css/animate.min.css" />

        <!-- 引入重写文件 重置html元素的自带的样式 -->
        <link rel="stylesheet" type="text/less" href="./assets/css/reset.less" />

        <!-- 引入自己的样式文件 -->
        <link rel="stylesheet" type="text/less" href="./assets/css/mywork.less" />
</head>
    <body>
        <!-- 导航栏 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- 左边 -->
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand wow rollIn" href="#">Spirit8</a>
                </div>

               <!-- 右边 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow bounceInRight" href="#">home</a></li>
                    <li><a class="wow bounceInRight" href="#about">about</a></li>
                    <li><a class="wow bounceInRight" href="#team">team</a></li>
                    <li><a class="wow bounceInRight" href="#services">services</a></li>
                    <li><a class="wow bounceInRight" href="#clients">clients</a></li>
                    <li><a class="wow bounceInRight" href="#work">work</a></li>
                    <li><a class="wow bounceInRight" href="#testimonials">testimonials</a></li>
                    <li><a class="wow bounceInRight" href="#contact">contact</a></li>
                </ul>
                </div>
            </div>
        </nav>
        <!-- banner图 -->
         <div class="banner"id="home">
            <div class="title wow flip">
                WELCOME ON <span>SPIRIT8</span>
            </div>
            <div class="subtitle wow zoomIn">
                We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
            </div>
            <div class="other">
                <a>↓</a>
            </div>
         </div>
        <!-- 关于 -->
         <div class="about" id="about">
            <div class="container">
                <!-- 左边 -->
                <div class="left wow bounceOut">
                    <img src="./assets/images/about-background.png" />
                </div>
                <!-- 右边 -->
                <div class="right ">
                    <!-- 标题 -->
                    <div class="subject wow rollIn">
                        <div class="small">About us</div>
                        <div class="big">
                            <span>Some</span>
                             words 
                            <span>about us</span></div>
                    </div>
                    <!-- 内容 -->
                    <div class="desc wow zoomInRight">We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</div>
                    <!-- 列表 -->
                    <ul class="list wow slideInRight">
                        <li>
                            <span class="glyphicon glyphicon-record"aria-hidden="true"></span>
                            <span>Mission-</span>
                            We deliver uniqueness and quality
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-record"aria-hidden="true"></span>
                            <span>skills-</span>
                            Delivering fast and excellent results
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-record"aria-hidden="true"></span>
                            <span>clients-</span>
                            Satisfied clients thanks to our experience
                        </li>                                               
                    </ul>
                    <!-- 按钮 -->
                    <div class="more wow bounceOut">
                        <span class="glyphicon glyphicon-briefcase"aria-hidden="true"></span>
                        <span>Browse our work</span>
                    </div>
                </div>
            </div>

         </div>
        <!-- 团队 -->
        <div class="team" id="team">
            <div class="container">
                <div class="title wow rotateIn">MEET <span>OUR TEAM</span></div>
                <div class="list wow fadeInLeft">
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover"> 
                            <img src="./assets/images/1.jpg" />                         
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                           <p> Jason Statham</p>
                           <p>Knife designet</p>
                           <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover"> 
                            <img src="./assets/images/2.jpg"/>                           
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>Van Damme</p>
                            <p>No English</p>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover">     
                            <img src="./assets/images/3.jpg"/>                     
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>Van Damme</p>
                            <p>No English</p>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover">     
                            <img src="./assets/images/4.jpg"/>                     
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>Van Damme</p>
                            <p>No English</p>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                    </div>                    
                </div>
                <div class="more">
                    <span class="wow bounceInDown" data-wow-delay="500ms"></span>
                    <span class="wow bounceInDown" data-wow-delay="550ms"></span>
                    <span class="wow bounceInDown" data-wow-delay="600ms"></span>
                </div>
            </div>
        </div>
        <!-- 服务 -->
        <div class="services" id="services">
            <div class="container">
                <div class="title wow rotateInUpLeft">take a look at <span>our services</span></div>
                <div class="desc wow zoomInDown">Lorem ipsum comes tom secions .032 and .033 ot'de Finibus onormet walorum" theExtemes ot cood andEvl bvcicer witenin4s ac This bookisa treatise on the theory of ethics, very popular during the Renaissance.The frstline of orem lpsum,"Lorem ipsum dolorsit amet., comes from a line in section 1.10.32.</div>
                <div class="list wow slideInRight">
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover"> 
                            <img src="./assets/images/1.jpg" />                         
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                           <p> WEB DESIGN</p>
                           <p>The first line of Lorem lpsum, "Loremipsum dolor sit amet.", comes from a line in section 1.10.32.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover"> 
                            <img src="./assets/images/2.jpg"/>                           
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>MOBILE APPS</p>
                            <p>The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover">     
                            <img src="./assets/images/3.jpg"/>                     
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>PHOTOGRAPHY</p>
                            <p>The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from aline in section 1.10.32.</p>
                        </div>
                    </div>
                    <div class="item">
                        <!-- 图片 -->
                        <div class="cover">     
                            <img src="./assets/images/4.jpg"/>                     
                        </div>
                        <!-- 文字 -->
                        <div class="box">
                            <p>MARKETING</p>
                            <p>The first line of Lorem lpsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                        </div>
                    </div>                    
                </div>
                <div class="more">
                    <span class="wow bounceInDown" data-wow-delay="500ms"></span>
                    <span class="wow bounceInDown" data-wow-delay="550ms"></span>
                    <span class="wow bounceInDown" data-wow-delay="600ms"></span>
                </div>
            </div>
        </div>
        <!-- 客户端 -->
        <div class="clients" id="clients">
            <div class="title wow zoomInDown">SOME OF <span>OUR CLIENTS</span></div>
            <div class="desc wow zoomInDown">CHANEL  <span>Z A R A  GUERLAIN  LANCOME </span><span>LACOSTE</span></div>
            <div class="more">
                <span class="wow bounceInDown" data-wow-delay="500ms"></span>
                <span class="wow bounceInDown" data-wow-delay="550ms"></span>
                <span class="wow bounceInDown" data-wow-delay="600ms"></span>
            </div>
        </div> 
        <!-- 作品 -->
        <div class="work" id="work">
            <div class="title wow wobble">TAKE A LOOK<span>OUR WORK</span></div>
            <div class="desc wow bounce">Lorem lpsum comes from sections 1.10.32 and 1.10.33 of"de Finibusonorum et Malorum" (The Extremes ofGood and Evil) by Cicero, written in 45 BC. This bookis a treatise on the theoryofethics, very popular during the Renaissaice. The first line ofLorem lpsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            <div class="top">
                <div>
                    <a class="left wow bounceInDown" href="javasciprt:void(0)">FILIER BY TYPE</a>
                </div>
                <div class="right">
                    <a class="one wow bounceInDown" href="javasciprt:void(0)"><span>all</span></a>
                    <p>|</p>
                    <a class="one wow bounceInDown" href="javasciprt:void(0)">Web design</a>
                    <p>|</p>
                    <a class="one wow bounceInDown" href="javasciprt:void(0)">Moblie design</a>
                    <p>|</p>
                    <a class="one wow bounceInDown" href="javasciprt:void(0)">Photograph</a>
                </div>
            </div>
            <div class="list wow slideInLeft">
                <div class="cover"> 
                    <img src="./assets/images/1.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/1.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/1.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/1.jpg" />                         
                </div>                                               
            </div>
            <div class="list wow slideInRight">
                <div class="cover"> 
                    <img src="./assets/images/4.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/4.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/4.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/4.jpg" />                         
                </div>                                               
            </div>
            <div class="list wow slideInLeft">
                <div class="cover"> 
                    <img src="./assets/images/3.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/3.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/3.jpg" />                         
                </div>
                <div class="cover"> 
                    <img src="./assets/images/3.jpg" />                         
                </div>                                               
            </div>
        </div>
        <!-- 奖状 -->
        <div class="testimonials" id="testimonials">
            <div class="title wow zoomIn"><span>OUR CLIENTS'</span>testimonials</div>
            <div class="desc wow fadeInUp">THIS BOOK IS A TREATISE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE, THE FIRSTLINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..", COMES FROM A LINE IN SECTION 1.10.32.</div>
            <div class="other wow fadeInUp">Dean Martin,<span>CEO Acme Inc</span> </div>
            <div class="more">
                <span class="wow bounceInDown" data-wow-delay="500ms"></span>
                <span class="wow bounceInDown" data-wow-delay="550ms"></span>
                <span class="wow bounceInDown" data-wow-delay="600ms"></span>
            </div>
        </div> 
        <!-- contact -->
        <div class="contact" id="contact" id="contact">
            <!-- 整个盒子 -->
            <div class="bigbox">  
                <!-- 标题  -->
                <div class="title wow fadeInUp" data-wow-delay="100ms">
                    feel free to<span> contact us</span>
                </div>
                <p class="desc wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                    Good and Evil)
                    by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                    Renaissance.</p>
                <!-- 表单 -->
                <div class="register">
                    <form name="register" method="post">
                        <!-- 上面 -->
                        <div class="top wow fadeInUp" data-wow-delay="300ms">
                            <div class="item">
                                <h5>Name<sup>*</sup></h5>
                                <div class="input">
                                    <input type="text" name="username" placeholder="请输入用户名称" required />
                                </div>
                            </div>
                            <div class="item">
                                <h5>Email Address<sup>*</sup></h5>
                                <input type="text" name="username" placeholder="请输入邮箱" required>
                            </div>
                        </div>
                        <!-- 下面 -->
                        <div class="bottom wow fadeInUp" data-wow-delay="400ms">
                            <h5>Message<sup>*</sup></h5>
                            <textarea name="message" placeholder="请输入内容" required></textarea>
                        </div>
                        <!-- send按钮 -->
                        <div class="send wow fadeInUp" data-wow-delay="500ms">
                            <button class="font wow fadeInUp" data-wow-delay="500ms">SEND</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer" id="footer">
            <div class="container">
                <p>ALL RIGHTS RESERVED.COPYRIGHT © 2014 <span>SPIRIT8</span></p>
                <div class="link">
                    <div class="item"><img src="./assets/images/footer1.png"/></div>
                    <div class="item"><img src="./assets/images/footer2.png"/></div>
                    <div class="item"><img src="./assets/images/footer3.png"/></div>
                    <div class="item"><img src="./assets/images/footer4.png"/></div>
                    <div class="item"><img src="./assets/images/footer5.png"/></div>
                </div>
            </div>
        </div>
    </body>
</html>
</html>
<!-- 依赖jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap插件脚本 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less 编译css的一个插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入瀑布流插件的js文件 -->
<script src="./assets/js/wow.min.js"></script>

<script>
    // 实例化瀑布流插件
    new WOW().init()
</script>